<style>
    .pencil-input-edit {
        display: block;
        width: 100%;
        height: 39px;
        padding: 9px 12px;
        font-size: 13px;
        line-height: 1.49;
        color: #555555;
    }
</style>
<template id="pencil-input">
    <div v-on:mouseenter="showPencil=true" v-on:mouseleave="showPencil=false" class="pencil-input-edit">
        <b v-if="changeStatus == 'normal'" class="pencil-input-edit">{{content}}
            <b v-if="showPencil" class="fa fa-pencil" v-on:click="changeStatus = 'alert'" style="margin-left: 5px"></b>
        </b>
        <input class="pencil-input-edit" v-model="content" v-if="changeStatus == 'alert'" v-on:blur="statusForBack" v-focus>
    </div>
</template>
<script>
    Vue.component("pencil-input", {
        props: ['content'],
        data: function () {
            return {
                showPencil: false,
                changeStatus: 'normal'
            }
        },
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        methods: {
            statusForBack: function () {
                this.changeStatus = 'normal';
                this.showPencil = false;
                this.$emit('changed', this.content);
            }
        },
        template: '#pencil-input'
    })
</script>





